body {
  margin: 0;
  padding: 0;
  background-color: white;
}

body > :not(#csv-table):not(#csv-color) {
  display: none;
}

/* Main */

#csv-table {
  padding: 7px;
  background-color: white;
}

/* Header */

#page-header {
  font-family: -apple-system, "Segoe UI", Oxygen, Ubuntu, "Open Sans",
    "Helvetica Neue", sans-serif;
  padding: 12px;
  background-color: #eee;
  border: none;
}

#page-header p {
  margin: 0;
  color: #444;
  line-height: 1.5;
}

#page-header .result {
  font-family: monospace;
  background: #ddd;
  padding: 2px 3px 1px;
  border-radius: 5px;
}

#page-header #review {
  color: #444;
}

/* Skipped Text */

#skipped-text {
  font-family: monospace;
  margin: 15px 0;
}

/* The Table */

table {
  border: 5px solid #ffcf0acc;
  border-top: 0;
  font-family: -apple-system, "Segoe UI", Oxygen, Ubuntu, "Open Sans",
    "Helvetica Neue", sans-serif;
  font-size: 15px;
  border-spacing: 1px 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  color: #111; /* fixes text not readable in dark mode */
}

thead {
  position: sticky;
  top: 0;
}

thead tr {
  background-color: #ffcf0aee;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.13);
}

thead tr th {
  /* Chrome bug for sticky in thead, so do it again for th 🤷‍♂️ */
  position: sticky;
  top: 0;
  background-color: #ffcf0aee;
  padding-top: 10px;
  padding-bottom: 10px;
}

tbody tr:nth-child(even) {
  background: #eee;
}

tbody tr:hover {
  transition: background 0.3s;
  background-color: #ffcf0a55;
}

td,
th {
  padding: 4px 7px 3px;
  border: none;
  margin: 0;
}
